<div class="slide-down" [class.hidden]="isShowControl" (mouseover)="isShowControl = !isShowControl"><span class="fa fa-music"></span></div>
<div class="music clearfix"  [class.show]="isShowControl" (mouseleave)="isShowControl = false">
  <div class="music_content">
    <div class="music_main_control">
      <!--控制按钮-->
      <div class="control_button">
        <span class="fa fa-fast-backward" (click)="backwardMusic()"></span>
        <span class="fa fa-play" [class.fa-pause]="isPause" (click)="playMusic()"></span>
        <span class="fa fa-fast-forward" (click)="forwardMusic()"></span>
      </div>
      <!--img-->
      <div class="control_img">
        <img src = {{audioObj?.blurPicUrl}} alt="">
      </div>
      <!--progress-->
      <div class="control_progress">
        <!--进度条上侧歌名-->
        <div class="control_detail_song"><span id="song"></span><span id="person">{{audioObj?.name}}</span></div>
        <!--进度条下侧进度条-->
        <div>
          <div>
            <div class="control_progress_line"><div class="control_progress_time" [style.width]="progressWidth+'%'"></div></div>

          </div>
          <div class="show_time">
            <i>{{MediaTime ?.duration}}</i>
          </div>
        </div>
      </div>
      <!--assist按钮-->
      <div class="control_assist">
        <!--音量控制-->
        <span id="audio_volume" class="fa fa-volume-up"></span>
        <!--列表控制-->
        <span id="audio_list" class="fa fa-list" (click)="isShowMusicList = !isShowMusicList"></span>
      </div>
    </div>
  </div>
  <!--音乐列表-->
  <div class="music_list" [class.show]="isShowMusicList">
    <ul class="music_ul_lis">
      <li><span style="float: right"></span></li>
      <li *ngFor="let item of listMusic; index as i " (click)="listOneMusic(item.id, i, $event)"><span class="list_music_index">{{i+1}}</span><span>{{item.name}}</span></li>
    </ul>
  </div>
  <!--资源-->
  <audio [src]="urlMusic" id="audio"></audio>
</div>
<!---->
<!--(mouseleave)="isShowControl = !isShowControl"-->
